<template>
  <div class="navigation">
    <el-tree
      :data="modelType === 'teacher' ? teacherData : studentData"
      :props="defaultProps"
      @node-click="handleNodeClick"
    />
  </div>
</template>

<script lang="ts" setup>
import {ref, defineProps} from "vue"
interface Tree {
  label: string
  path: string
  children?: Tree[]
}
const handleNodeClick = (data: Tree) => {
  props.setHomePage!(data.path)
}
const teacherData: Tree[] = [
  {
    label: "首页",
    path: "teacherHome"
  },
  {
    label: "作业管理",
    path: "",
    children: [
      {
        label: "作业发布",
        path: "workPublished"
      },
      {
        label: "作业批改",
        path: "workCorrecting"
      },
      {
        label: "题库添加",
        path: "questionBank"
      }
    ]
  },
  {
    label: "个人中心",
    path: "PersonalView"
  }
]
const studentData: Tree[] = [
  {
    label: "首页",
    path: "studentHome"
  },
  {
    label: "作业管理",
    path: "",
    children: [
      {
        label: "作业查看",
        path: "HomeworkListView"
      }
    ]
  },
  {
    label: "个人中心",
    path: "PersonalView"
  }
]
const defaultProps = {
  children: "children",
  label: "label",
  class: "treeNode"
}
const props = defineProps({
  setHomePage: {
    type: Function
  }
})
const modelType = window.localStorage.getItem("modelType")
  ? window.localStorage.getItem("modelType")!
  : "teacher"
</script>

<style lang="scss" scoped>
.navigation {
  width: 15%;
  height: 100%;
  background-color: rgba(0, 51, 102, 0.3);
  ::v-deep .el-tree {
    background-color: rgba(0, 51, 102, 0.05);
  }
}
</style>
<style lang="scss">
.treeNode {
  line-height: 40px;
}
.treeNode .el-tree-node__content {
  height: 40px;
  padding: 10px 0;
}
</style>
